<template>
  <div>
    <h1>SSR 演示页面</h1>
    
    <div style="border: 2px solid blue; padding: 20px; margin: 20px 0;">
      <h2>1. 内部 API 调用（useFetch）</h2>
      <p>数据: {{ internalData }}</p>
      <p style="color: green;">
        首次访问时在服务端执行，浏览器控制台看不到请求<br>
        通过 NuxtLink 跳转到此页面时，才会在控制台看到 /api/hello 请求
      </p>
    </div>

    <div style="border: 2px solid red; padding: 20px; margin: 20px 0;">
      <h2>2. 外部 API 调用（真实的 HTTP 请求）</h2>
      <p>数据: {{ externalData }}</p>
      <button @click="fetchExternal">点击获取外部数据</button>
      <p style="color: orange;">
        这个请求无论何时都会在控制台显示（如果是外部 URL）
      </p>
    </div>

    <div style="border: 2px solid purple; padding: 20px; margin: 20px 0;">
      <h2>3. 查看渲染模式</h2>
      <p>当前渲染位置: <strong>{{ renderLocation }}</strong></p>
      <p>页面加载时间: {{ loadTime }}</p>
    </div>

    <hr>
    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>

<script setup lang="ts">
// 1. 服务端/客户端都会执行的 useFetch
const { data: internalData } = await useFetch('/api/hello')

// 2. 外部 API 示例（会产生真实的 HTTP 请求）
const { data: externalData, refresh } = await useFetch('https://api.github.com/users/nuxt', {
  // 可以选择只在客户端执行
  // server: false
})

// 3. 检测渲染位置
const renderLocation = ref('')
const loadTime = ref('')

if (process.server) {
  renderLocation.value = '服务端 (SSR)'
  console.log('🟢 这段代码在服务端执行')
} else {
  renderLocation.value = '客户端 (CSR)'
  console.log('🔵 这段代码在浏览器执行')
}

onMounted(() => {
  loadTime.value = new Date().toLocaleTimeString()
  console.log('🟡 onMounted 只在客户端执行', loadTime.value)
})

const fetchExternal = async () => {
  await refresh()
  alert('查看浏览器控制台的 Network 标签！')
}
</script>

